@model IColumn
@{
    var valueGetter = new HtmlString("@(Model." + Model.Name + ")");
    var uploadButton = Model.Name + "_button";
    var paramInput = Model.Name + "_param";
}
<tr>
    <th>@(string.IsNullOrEmpty(Model.Label) ? Model.Name : Model.Label)</th>
    <td>
        <input id="@Model.Name" name="@Model.Name" type="text" value="@valueGetter" @Kooboo.CMS.Form.Html.ValidationExtensions.GetUnobtrusiveValidationAttributeString(Model)  class='long' readonly="readonly"/>
        <a id="@uploadButton">@Html.IconImage("plus")</a>
        <input id="@paramInput" name="@paramInput" type="hidden" />
           <input type="hidden" name="Kooboo-Image-Crop-Field" value="@Model.Name" />             
        @Html.Raw(FormHelper.Tooltip(Model.Tooltip))
        <script>
            $(function () {
                var $input = $('#@Model.Name');
                var $input_param = $('#@paramInput');
                var $uploadButton = $('#@uploadButton');
                var tempFileUrl = '@@Html.Raw(Url.Action("ImageCrop", ViewContext.RequestContext.AllRouteValues()))';
                var $top = $(top);
                $uploadButton.click(function () {
                    cropParam = $top.data('crop-param');
                    $top.data('onCropped', function (param) {
                        cropParam = param;
                        var json = $.toJSON(param);
                        $input_param.val(json);
                        $input.val(param.Url);
                        $top.data('crop-param', param)
                    });
                    $.pop({
                        width: 800,
                        height: 580,
                        dialogClass: 'iframe-dialog',
                        frameHeight: "100%",
                        url: tempFileUrl + "&sourceUrl=" + $input.val()
                    });
                });
            });
        </script>
    </td>
</tr>
